<%@page contentType="text/html;charset=UTF-8"%>
<%@page pageEncoding="UTF-8"%>
<%@ page session="false"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<html>
<head>
<META http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Upload Example</title>
<style>
.remote {
	height: 200px;
	width: 250px;
	overflow: auto;
	display: none;
	background-color: #999;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<script src="http://malsup.github.com/jquery.form.js"></script> 

<script language="javascript"> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
        	var formOptions = {target: '#nameFormResponse'};
    		$('#frm').ajaxForm(formOptions);

    		$.ajax({  
    		    type: "POST",  
    		    url: "getcheckbox.do",
    		    success: function(data){  
				$("#nameFormResponse").html(data);
				
				var myObject = eval('('+data+')');
				
				var objCount=0;
				var tempSb="";
				$.each(myObject, function(key) {
					//alert(myObject[key][0]);
					tempSb+='<div id="div_chk_'+myObject[key][0]+'"><input type="checkbox" id="chk_'+myObject[key][0]+'" /><label>'+myObject[key][1]+'</label><div class="remote" id="remote_chk_'+myObject[key][0]+'"></div></div>';
				});
				$("#element").append(tempSb);		
									    		   
    		    },  
    		    error: function(e){  
    		      alert('Error: ' + e.status);  
    		    }  
    		  });
  		  $("input[type=checkbox]").live("click",function(){
				//alert($(this).attr("checked"));
				var chkbox=$(this).attr("id");
				if($(this).attr("checked")=="checked"){
					var chk_id=$(this).attr("id").split("chk_");
					
						$.ajax({  
			    		    type: "POST",  
			    		    url: "getcheckboxurl.do",
			    		    data :"id="+chk_id[1],
			    		    success: function(data){ 
				    		    //alert(data);  
								$.ajax({  
					    		    type: "GET",  
					    		    url: data,
					    		    success: function(urlcontent){  
									//alert(urlcontent);
									$("#remote_"+chkbox+"").html(urlcontent);		    		   
					    		    },  
					    		    error: function(e){  
					    		      alert('Error1: ' + e.status);  
					    		    } 
								});			    		   
			    		    },  
			    		    error: function(e){  
			    		      alert('Error2: ' + e.status);  
			    		    }  
			    		  });
					$("#remote_"+$(this).attr("id")+"").show("slow");
				}else{
					$("#remote_"+$(this).attr("id")+"").hide("slow");
				}

  	  	  });
        }); 
    </script>
</head>
<body>
<div>
<fieldset><legend>Options</legend>
<div id="element"></div>
</fieldset>
</div>
<form:form modelAttribute="uploadItem" id="frm" name="frm" method="post"
	enctype="multipart/form-data">
	<fieldset><legend>Upload File</legend>
	<table>
		<tr>
			<td><form:label for="fileData" path="fileData">File</form:label><br />
			</td>
			<td><form:input path="fileData" id="image" type="file" /></td>
		</tr>
		<tr>
			<td><br />
			</td>
			<td><input type="submit" value="Upload" id="submit"
				name="_eventId_submit" /></td>
		</tr>
	</table>
	<div id="nameFormResponse"></div>
	</fieldset>
</form:form>


</body>
</html>